<template>
    <div class="localPath" v-show="visible">
        <p>选择查找视频的位置</p>
        <div class="dir-wrap">
            <a-card hoverable v-for="(v, k) in pathList" :key="k" class="dir-card">
                <a-row type="flex" justify="space-between" align="middle" class="dir-item">
                    <a-col>{{ v }}</a-col>
                    <a-col><a-icon type="close" @click="delPath(k)" /></a-col>
                </a-row>
            </a-card>
        </div>
        <a-row type="flex" class="btn-panel">
            <a-button @click="selectPath">
                添加文件夹
            </a-button>
            <a-button @click="delPath('all')">
                清空
            </a-button>
        </a-row>
        <AddVideo ref="addVideoRef" />
    </div>
</template>

<script>
    import { selectPath, writeData } from '@/util/file-action'
    import AddVideo from '@/components/add-video/index.vue'
    export default {
        name: 'LocalPath',
        components: { AddVideo },
        data() {
            return {
                pathList: [],
            }
        },
        props: {
            visible: {
                type: Boolean,
                default: false,
            },
        },
        watch: {
            visible: {
                handler(nval) {
                    if (nval) {
                        const { pathList } = this.$store.state.videos
                        this.pathList = []
                        for (const i in pathList) {
                            this.$set(this.pathList, i, pathList[i])
                        }
                    }
                },
                immediate: true,
            },
        },
        methods: {
            setPathList() {},
            /**
             * 删除指定的或者全部路径
             * @param {string} k ['索引', 'all']
             */
            delPath(k) {
                const that = this
                this.$confirm({
                    title: '确认删除？',
                    content: '',
                    okText: '确认',
                    cancelText: '取消',
                    onOk() {
                        let { pathList } = that
                        if (k == 'all') {
                            pathList = []
                        } else {
                            pathList.splice(k, 1)
                        }
                        if (writeData(pathList, 'paths', 'video', true)) {
                            that.pathList = pathList
                            that.$store.commit('videos/setPathList', pathList)
                        }
                    },
                    onCancel() {
                        console.log('Cancel')
                    },
                })
            },
            async selectPath() {
                let paths = await selectPath()
                // 去重
                for (const path of this.pathList) {
                    const i = paths.findIndex((v) => v == path)
                    if (i != -1) {
                        paths.splice(i, 1)
                    }
                }
                if (paths.length > 0) {
                    this.$refs.addVideoRef.addVideo('openDirectory', paths)
                    const pathList = paths.concat(this.pathList)
                    if (writeData(pathList, 'paths', 'video', true)) {
                        this.$store.commit('videos/setPathList', pathList)
                        for (const i in pathList) {
                            this.$set(this.pathList, i, pathList[i])
                        }
                    }
                }
            },
        },
    }
</script>

<style scoped lang="less">
    .localPath {
        .dir-wrap {
            width: 500px;
            .dir-card {
                background: #f4f8fa;
                margin-bottom: 5px;
                /deep/ .ant-card-body {
                    padding: 10px;
                }
            }
        }
        .btn-panel {
            margin-top: 15px;
        }
        .btn-panel > button:first-child {
            margin-right: 10px;
        }
    }
</style>
